<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/meiti.css">
</head>

<body>
    <div class="index">
        <div class="top">
            <div class="top-left">
                <span>小u商城后台管理系统</span>
            </div>
            <div class="top-right">
                <div class="person">
                    <a href="./login.html">
                        <img src="./image/person.png" alt="">
                        <span>周杰伦</span></a>
                </div>
                <div class="cancel">
                    <a href=""><i class="iconfont icon-zhuxiaologout11"></i>
                        <span>注销</span></a>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="btn">
                <span></span>
                <span></span>
                <span></span>  
            </div>
            <input type="checkbox">
            <div class="white">
                <p><i class="iconfont icon-shangpin"></i><span>商品管理</span></p>
                <p><i class="iconfont icon-shangpin"></i><span>商品管理</span></p>
                <p><i class="iconfont icon-shangpin"></i><span>商品管理</span></p>
                <p><i class="iconfont icon-shangpin"></i><span>商品管理</span></p>
            </div>
            <div class="bottom-left">
                <p class="run">
                    <a href="">
                        <i class="iconfont icon-shangpin"></i><span>商品管理</span>
                    </a>
                </p>
                <ul>
                    <a href="">
                        <li class="first"><i class="iconfont icon-shangpin"></i>商品信息管理</li>
                    </a>
                    <a href="">
                        <li><i class="iconfont icon-shangpin"></i>添加商品信息</li>
                    </a>
                    <a href="">
                        <li><i class="iconfont icon-shangpin"></i>商品类型管理</li>
                    </a>
                </ul>
                <div class="bl-b">
                    <p><i class="iconfont icon-dingdan-"></i><span>订单管理</span></p>
                    <p><i class="iconfont icon-user"></i><span>用户管理</span></p>
                    <p><i class="iconfont icon-guanliyuan"></i><span>管理员管理</span></p>
                </div>
            </div>
            <div class="bottom-right">
                <div class="r-top">
                    <p><a href=""><span>商品信息管理</span></a></p>
                    <p><a href="./product.html"><span>操作</span><i class="iconfont icon-xiajiantou"></i></a></p>
                </div>
                <div class="r-bottom">
                    <div class="item">
                        <div class="item-top">
                            <p><span>150</span></p>
                            <p><span>新订单</span></p>
                        </div>
                        <div class="item-bottom">
                            <span>详细</span><i class="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-top">
                            <p><span>70</span></p>
                            <p><span>转换率</span></p>
                        </div>
                        <div class="item-bottom">
                            <span>详细</span><i class="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-top">
                            <p><span>80</span></p>
                            <p><span>新注册用户</span></p>
                        </div>
                        <div class="item-bottom">
                            <span>详细</span><i class="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                    <div class="item">
                        <div class="item-top">
                            <p><span>100</span></p>
                            <p><span>日PV</span></p>
                        </div>
                        <div class="item-bottom">
                            <span>详细</span><i class="iconfont icon-youjiantou"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>